<template>

    <section>
        <el-button type="text" @click="dialogVisible = true">click to open the Dialog</el-button>
        <el-button type="text" @click="logout">退出登录</el-button>
        <!--                show-close="false"-->
        <el-dialog
                v-dialogDrag
                :visible.sync="dialogVisible">
            <el-container>
                <el-aside id="left-side" width="300px">
                    <MsgList></MsgList>
                </el-aside>
                <el-container id="middle-diolog">
                    <!--            <el-header>用户/群名称</el-header>-->
                    <chat-record v-show="chatFrameFlag"></chat-record>
                    <img v-show="bgmFlag" src="images/backgroud/qq-bg-nMSG.png" style="height: 100%;width: 100%">
                    <!--            <el-footer>发消息</el-footer>-->
                </el-container>
                <el-aside v-show="GpersonFrameFlag" width="200px">
                    <FriendList></FriendList>
                </el-aside>
            </el-container>
        </el-dialog>
    </section>
</template>


<script>
    import MsgList from "./chat/MsgList";
    import ChatRecord from "./chat/ChatRecord";
    import {getEmojiData} from '../api/getEmoji'
    import FriendList from "./chat/FriendList";
    import {IMClient} from "common/im_client";
    import Bus from "common/evenBus"

    export default {
        name: "Chat",
        components: {FriendList, ChatRecord, MsgList},
        data() {
            return {
                friendList:[],
                GpersonFrameFlag:false,
                chatFrameFlag:false,
                bgmFlag:true,
                dialogVisible: true,
                //msgToUserId: '-1',
                msgDiaLog: true,
                comment: {},
                msg: '',
                showEmoji: true,//是否显示表情
                showToast: true,//显示提示框
                toastText: '',
                showMoreOpratin: true,//是否显示更多操作
                toShowMaskInfo: true,//点击头部是否显示相信信息
                bellStatus: true,//头部区域铃声图标
                myaudio: '/audio/msg.mp3',//铃音
                videoVal: true,//点击视频文字时候
                showNarrowPopVal: true,//点击切换成小窗口
                testContents: ["今天天气不错", '这个问题还没遇到过', '你说什么，我听不明白', '今天周五了', '请稍后--', '当前客服忙', '您还有什么咨询的吗', '正在查询', 'gone with the wind'],
                content: '',
                showScore: false,//显示评分
                ScoreDB: {
                    scoreDatas: [
                        {
                            scoreTitle: '服务指数',
                            scoreFlag: 0,
                            scoreArr: [1, 2, 3, 4, 5]
                        },
                        {
                            scoreTitle: '接通速度',
                            scoreFlag: 1,
                            scoreArr: [1, 2, 3, 4, 5]
                        },
                        {
                            scoreTitle: '办事效率',
                            scoreFlag: 2,
                            scoreArr: [1, 2, 3, 4, 5]
                        }
                    ],
                    maxVal: [0, 0, 0]
                },
                imgFile: {},
                EXPS: [],
            }
        },

          beforeCreate() {
          },
        created() {
            this._loadEmojiData();
        },
        mounted() {
           // debugger
            let obj = JSON.parse(sessionStorage.getItem('mockUser'));
            const clinet = new IMClient(obj.id);
            //连接聊天服务器
            this.$store.commit('setIMClient', clinet);
            var flag=true;
            if (localStorage.getItem("friendList")!=null) {
                this.friendList=JSON.parse(localStorage.getItem("friendList"));
            }
            for(var i=0;i<this.friendList.length;i++){
                if(this.friendList[i].id==obj.id){
                    flag=false;
                }
            }
            if (flag){
                this.friendList.push(obj);
            }
            localStorage.setItem("friendList",JSON.stringify(this.friendList));

          //  console.log("====101==friendList:"+this.friendList.length)
            clinet.connect();
          //  console.log("============================112")
            // console.log(getEmojiData); // getEmojiData
            /**
             * vue中emit与on和BUS
             bus：
             //vue原型链挂载总线
             Vue.prototype.bus = new Vue();
             //子组件发送数据
             this.bus.$emit("change",data);
             //子组件接收数据
             this.bus.$on("change",function(data){
})
             */
           Bus.$on("groupchat", (message) => {
                //console.log(message)
                this.msgDiaLog = true
                this.bgmFlag=message.bgmFlag
                this.chatFrameFlag=message.chatFrameFlag
                this.GpersonFrameFlag=message.GpersonFrameFlag
            });

            Bus.$on("singlechat", (message) => {
                //console.log(message)
                this.bgmFlag=message.bgmFlag
                this.chatFrameFlag=message.chatFrameFlag
                this.GpersonFrameFlag=message.GpersonFrameFlag
                this.msgDiaLog = true
            });
            //this.buildWebSocketLink();

        },
        methods: {
            logout(){
                //localStorage.removeItem("mockUser");
                sessionStorage.removeItem("mockUser");
                this.$router.push({path: '/login'});
            },
            showInfo() {
                this.toShowMaskInfo = true;
            },
            //点击控制表情切换（显示和隐藏）
            emojiFuc() {
                this.showEmoji = !this.showEmoji;
            },
            videoFuc() {
                this.videoVal = true;
                this.showNarrowPopVal = false;
            },
            //提示音
            hint(staus) {
                if (staus != undefined) {
                    this.bellStatus = !this.bellStatus;
                }
                this.bellStatus ? this.$refs.hintAudio.play() : this.$refs.hintAudio.pause();
            },
            showNarrowPopFuc() {
                this.showNarrowPopVal = true;
                this.videoVal = false;
            }, showBigPopFuc() {
                this.showNarrowPopVal = false;
                this.videoVal = true;
            }, showEvaluateFuc() {
                this.showScore = !this.showScore;
            },
            getEmotionData(pageNow, pageSize) {
                return this.EXPS.slice((pageNow - 1) * pageSize, pageSize * pageNow)
            },
            replaceFace(con) {
                if (!con) {
                    return;
                }
                if (con.toString().indexOf('/:') > -1) {
                    var exps = this.EXPS;
                    for (var i = 0; i < exps.length; i++) {
                        con = con.replace(exps[i].reg, '<img id="emoji-gif" src="' + exps[i].file + '"  alt="" style="width: 20px;height: 20px;"/>');
                    }
                }
                return con;
            },
//点击星星进行星星评分
            selectStar(msg) {
                let index = msg[0];
                let scoreFlag = msg[1];
                let scoreArr = msg[2];
                var Target = [1, 2, 3, 4, 5];
                for (var i = 0; i < index; i++) {
                    Target[i] = i;
                }
//方便确定星星选中的个数，将不亮的星星数组设置为-1
                for (var j = index; j < Target.length; j++) {
                    Target[j] = -1;
                }

//评分结果数
                var tempArr = [];
                tempArr = this.ScoreDB.maxVal.slice(0);
                tempArr[scoreFlag] = index;
                this.ScoreDB.maxVal = tempArr.concat();
                this.ScoreDB.scoreDatas[scoreFlag].scoreArr = Target;
            },
//点击确定关闭星星评价
            confrmStar(msg) {
                this.showToast = true;
                this.toastText = '您的评分依次是 ' + msg;
                this.showScore = false;
                setTimeout(() => {
                    this.showToast = false;

                }, 2000)
            },

//滚动到底
            scrollToBottom() {
                setTimeout(() => {
                    //滚动条长度
                    var currentDistance = this.$refs.xwBody.scrollHeight - this.$refs.xwBody.clientHeight;
                    //当前滚动条距离顶部的距离
                    var currentScroll_y = this.$refs.xwBody.scrollTop;
                    if (currentDistance > 0 && currentDistance > currentScroll_y) {
                        currentScroll_y = Math.ceil((currentDistance - currentScroll_y) / 10) + currentScroll_y;
                        currentScroll_y = currentScroll_y > currentDistance ? currentDistance : currentScroll_y;
                        //微信和qq浏览器不支持 scrollTo？
                        //this.$refs.xwBody.scrollTo(0,currentScroll_y);
                        this.$refs.xwBody.scrollTop = currentScroll_y;
                        this.scrollToBottom();
                    }
                }, 13);
            },
            onFocusText() {
                this.scrollToBottom();
            },
            _loadEmojiData() {
                getEmojiData().then((res) => {
                    //debugger
                    //var json = eval('(' + res.data + ')');
                    var json =res.data;
                   // this.EXPS = json.EXPS.slice(0);
                    this.EXPS = json.EXPS;
                });
            },
        }
    }
</script>

<style>

    .data-v-32966422{
        width: 20px;
        height: 20px;
    }
    #emoji-gif{
        width: 20px;
        height: 20px;
    }
    .el-aside {
        line-height: 0px !important;
    }


    .el-header, .el-footer {

        color: #333;
        text-align: center;
        line-height: 60px;
    }

    .el-aside {

        color: #333;
        text-align: center;
        line-height: 200px;
    }

    .el-main {

        color: #333;
        text-align: center;
        line-height: 160px;
        height: auto;
    }

    body > .el-container {
        margin-bottom: 40px;
    }

    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
        line-height: 260px;
    }

    .el-container:nth-child(7) .el-aside {
        line-height: 320px;
    }
    .el-dialog__headerbtn {
        top: 0px !important;
    }
    .el-dialog__body {
        padding: 0px 0px !important;
    }

    .el-dialog__header {
        padding: 0px 0px 0px;
    }

    .el-dialog {
        position: relative;
        margin: 0 auto 0px;
    }

    /*html,body,#app,.el-dialog,.el-container{*/
    /*    !*设置内部填充为0，几个布局元素之间没有间距*!*/
    /*    padding: 0px;*/
    /*    !*外部间距也是如此设置*!*/
    /*    margin: 0px;*/
    /*    !*统一设置高度为100%*!*/
    /*    height: 100%;*/
    /*}*/

    html, body, #app, .el-dialog, .el-container {
        padding: 0px;
        margin: 0px;
        height: 550px;
    }
    #middle-diolog{
        border-right: solid!important;
        border-right-color: #33333314!important;
    }
    #left-side {
        border-right: solid!important;
        border-right-color: #33333314!important;
    }
</style>
